<script setup lang="ts">
import MpHtml from 'mp-html/src/uni-app/components/mp-html/mp-html.vue'

defineProps<{
  picture: string
  name: string
  position: string
  desc: string
  skills: string[]
}>()
</script>

<template>
  <view class="mb-24rpx flex items-center rounded-20rpx bg-white p-20rpx">
    <uv-image
      width="250rpx"
      height="250rpx"
      radius="20rpx"
      :src="picture"
    >
      <template #loading>
        <uv-loading-icon color="#666666" />
      </template>
    </uv-image>
    <Spacer width="16" />
    <view>
      <view class="flex items-center">
        <view class="text-41rpx font-medium leading-57rpx">
          {{ name }}
        </view>
        <Spacer width="10" />
        <view class="rounded-10rpx bg-#4999F7 px-8rpx py-3rpx text-24rpx text-white font-semibold leading-32rpx">
          {{ position }}
        </view>
      </view>
      <Spacer height="5" />
      <view class="max-h-80rpx overflow-hidden text-ellipsis text-28rpx text-#848484 leading-40rpx">
        <MpHtml :content="desc || '未知'" />
      </view>
      <Spacer height="16" />
      <view class="max-h-92rpx flex flex-wrap gap-y-12rpx overflow-hidden">
        <view v-for="skill in skills" :key="skill" class="mr-12rpx rounded-10rpx bg-#F4F4F4 px-12rpx py-4rpx text-24rpx text-#848484 leading-32rpx">
          {{ skill }}
        </view>
      </view>
    </view>
  </view>
</template>
